<template>
    <div>
        <ul>
            <li v-for="item in list" :key="item.id">
                <img :src='item.imgUrl' alt="">
                <p>{{ item.name }}</p>
            </li>
        </ul>
    </div>    
</template>

<script>
export default {
    data(){
        return {
            list: [
                {
                    id: 1,
                    imgUrl: require("./../../../assets/cart-img/icon-home.c1947eda40.png"),
                    name: '首页'
                },
                {
                    id: 2,
                    imgUrl: require("./../../../assets/cart-img/icon-category.be93273636.png"),
                    name: '分类'
                },
                {
                    id: 3,
                    imgUrl: require("./../../../assets/cart-img/icon-star.d051789804.png"),
                    name: '米圈'
                },
                {
                    id: 4,
                    imgUrl: require("./../../../assets/cart-img/icon-cart-selected.0099b47830.png"),
                    name: '购物车'
                },
                {
                    id: 5,
                    imgUrl: require("./../../../assets/cart-img/icon-user.23496a0116.png"),
                    name: '我的'
                }
            ]
        }
    }
}
</script>

<style scoped lang="scss">
ul{
    display: flex;
    justify-content: space-between;
    list-style: none;
    li{
        padding: 4px 10px;
        img{
            width: 20px;
            height: 20px;
        }
        p{
            margin-left: -3px;
            font-size: 13px;
        }
    }
}
</style>